<script>
/**
 * @position
 *  TOP_LEFT 控件将定位到地图的左上角。
 *  TOP_RIGHT 控件将定位到地图的右上角。
 *  BOTTOM_LEFT 控件将定位到地图的左下角。
 *  BOTTOM_RIGHT 控件将定位到地图的右下角。
 */
import commonMixin from './mixins/common.js'
export default {
    mixins: [commonMixin('control')],
    name: 'TianGeolocation',
    props: {
        position: {
            type: String,
            default: 'TOP_LEFT'
        },
        type:{
            type: String,
            default:'lc'
        }
    },
    methods: {
        cssObjToText(cssObj) {
            var styleAry = []
            for (const key in cssObj) {
                styleAry.push(key + ':' + cssObj[key])
            }
            styleAry = styleAry.join(';')
            return styleAry
        },
        createButton({ html, title, tag, container, cssObj, className }) {
            var link = document.createElement(tag)
            if (container) {
                container.appendChild(link)
            }
            if (html) {
                link.innerHTML = html
            }
            if (title) {
                link.title = title
            }
            if (className) {
                link.className = className
            }

            link.style = this.cssObjToText(cssObj)
            return link
        },
        load() {
            const { map, createButton,position,type } = this
            const that = this
            let pos={
                // eslint-disable-next-line no-undef
                TOP_LEFT:T_ANCHOR_TOP_LEFT,
                // eslint-disable-next-line no-undef
                TOP_RIGHT:T_ANCHOR_TOP_RIGHT,
                // eslint-disable-next-line no-undef
                BOTTOM_LEFT:T_ANCHOR_BOTTOM_LEFT,
                // eslint-disable-next-line no-undef
                BOTTOM_RIGHT:T_ANCHOR_BOTTOM_RIGHT,
            }
            // eslint-disable-next-line no-undef
            const newControl = new T.Control({ position: pos[position] })
            newControl.onAdd = function () {
                var container = document.createElement('div')
                this.Tian_geolocationContainer = createButton({
                    html: '',
                    title: '',
                    tag: 'div',
                    container: container,
                    className: 'Tian_geolocationContainer',
                    cssObj: {
                        background: `url(${require('../../../assets/images/map/gradient-bg-1x64.png')}) repeat-x`,
                        'background-size':'1px 32px',
                        overflow:'hidden',
                        border: '1px solid #d9d7d5',
                        'border-radius':'3px',
                        'box-shadow':'1px 1px 1px rgb(0 0 0 / 20%)'
                    }
                })

                this.Tian_geolocationIconBackground = createButton({
                    html: '',
                    title: '',
                    tag: 'div',
                    container: this.Tian_geolocationContainer,
                    className: 'Tian_geolocationIconBackground',
                    cssObj: {
                        float:'left',
                        width: '32px',
                        height: '32px',
                        cursor: 'pointer',
                        background: `url(${require('../../../assets/images/map/default-40x40.png')}) no-repeat`,
                        'background-size':'20px 20px',
                        'background-position':'center center',
                        
                    }
                })

                this.Tian_geolocationAddress = createButton({
                    html: '',
                    title: '',
                    tag: 'div',
                    container: this.Tian_geolocationContainer,
                    className: 'Tian_geolocationAddress',
                    cssObj:{
                        float:'left',
                        cursor: 'pointer',
                        background: `url(${require('../../../assets/images/map/gradient-bg-1x64.png')}) repeat-x`,
                        'background-size':'1px 32px',
                        'min-width': '70px',
                        'padding-left':'10px',
                        'padding-right':'10px',
                        'border-left':'1px solid #d9d7d5',
                        'display':'none'
                    }
                })
                this.Tian_geolocationAddressText = createButton({
                    html: '',
                    title: '',
                    tag: 'div',
                    container: this.Tian_geolocationAddress,
                    className: 'Tian_geolocationAddressText',
                    cssObj:{
                        height:'32px',
                        display:'table-cell',
                        'vertical-align':'middle'
                    }
                })
                this.Tian_geolocationIconBackground.onclick = (e)=>{
                    e.stopPropagation()
                    // eslint-disable-next-line no-undef
                    var lo = new T.Geolocation();
                    // eslint-disable-next-line no-undef
                    var lc = new T.LocalCity();
                    // eslint-disable-next-line no-undef
                    var geocoder = new T.Geocoder()

                    this.Tian_geolocationIconBackground.style.background=`url(${require('../../../assets/images/map/loading-40x40.gif')}) no-repeat`
                    this.Tian_geolocationIconBackground.style.backgroundSize=`20px 20px`
                    this.Tian_geolocationIconBackground.style.backgroundPosition=`center center`
                    if(type == 'lc'){
                        setTimeout(() => {
                            lc.location((e)=>{
                            // 经纬度解析
                                geocoder.getLocation(e.lnglat,(data)=>{
                                    const {result:{result:{addressComponent:{city,county}}}} = data
                                    const cityText = city + county
                                    this.Tian_geolocationAddressText.innerText = cityText
                                    this.Tian_geolocationAddress.style.display="block"
                                    this.Tian_geolocationIconBackground.style.background=`url(${require('../../../assets/images/map/default-40x40.png')}) no-repeat`
                                    this.Tian_geolocationIconBackground.style.backgroundSize=`20px 20px`
                                    this.Tian_geolocationIconBackground.style.backgroundPosition=`center center`
                                    that.$emit('geolocation',{geocoder:data,lnglat:e})
                                })
                            })
                        }, 1000);
                        
                    }else {
                        setTimeout(() => {
                            lo.getCurrentPosition((e)=>{
                                geocoder.getLocation(e.lnglat,(data)=>{
                                    const {result:{result:{addressComponent:{city,county}}}} = data
                                    const cityText = city + county
                                    this.Tian_geolocationAddressText.innerText = cityText
                                    this.Tian_geolocationAddress.style.display="block"
                                    this.Tian_geolocationIconBackground.style.background=`url(${require('../../../assets/images/map/default-40x40.png')}) no-repeat`
                                    this.Tian_geolocationIconBackground.style.backgroundSize=`20px 20px`
                                    this.Tian_geolocationIconBackground.style.backgroundPosition=`center center`
                                    that.$emit('geolocation',{geocoder:data,lnglat:e})
                                })
                            })
                        }, 1000);
                    }
                }
                return container
            }
            map.addControl(newControl)

            
        }
    },
    // eslint-disable-next-line vue/require-render-return
    render(){}
}
</script>